<template>
	<div class="source-wrap scene-edit-box">
		
		<Version @handleVersionRow="handleVersionRow" @deleteVersionRow="deleteVersionRow" @copyVersionRow="copyVersionRow"></Version>
		
		<div class="top-title">
			<span>APIForUE</span>
			<div style="margin-right: 20px;">
				<el-button v-hasPerm="['admin:add']" type="primary" plain link :icon="Collection"  @click.stop="openDialog('group',null,null)" style="font-size: 14px;">定义分组</el-button>
			</div>
		</div>

	  <div class="source-box">
		<div class="list-wrap">
			<div class="float scroll min" style="height: 100%;">
				<el-table
				  :v-loading="loading"
				  :data="tableData"
				  style="width: 100%; margin-bottom: 20px"
				  row-key="id"
				  :show-header="false"
				  default-expand-all
				>
					<el-table-column align="left" prop="name" label="名称"  />
					<el-table-column align="left" prop="modifyTime" label="更新时间" width="160" />
					<el-table-column align="left" prop="createTime" label="创建时间" width="160"  />
					<el-table-column align="left" label="操作" width="200">
						<template #header>
							<el-button v-hasPerm="['admin:add']" type="primary" plain link :icon="Collection"  @click.stop="openDialog('group',null,null)">定义分组</el-button>
						</template>
					  <template #default="scope">
						  
							<el-tooltip
							  class="box-item"
							  effect="dark"
							  content="定义接口"
							  placement="top"
							>
								<el-button
								  v-show="scope.row.type=='group'"
								  type="primary"
								  link
								  size="small"
								  @click.stop="openDialog('content',scope.row,null)"
								>
								  <i-ep-plus />
								</el-button>
							</el-tooltip>
							
							<el-tooltip
							  class="box-item"
							  effect="dark"
							  content="编辑"
							  placement="top"
							>
								<el-button
								  v-show="scope.row.username!='administrator' "
								  type="primary"
								  link
								  size="small"
								  @click.stop="openDialog(scope.row.type,{id:scope.row.pid},scope.row)"
								>
								  <i-ep-edit />
								</el-button>
							</el-tooltip>
							
							<el-tooltip
							  class="box-item"
							  effect="dark"
							  content="删除"
							  placement="top"
							>
								<el-button
								  v-show="scope.row.username!='administrator' "
								  type="primary"
								  link
								  size="small"
								   @click.stop="handleDelete(scope.row)"
								  ><i-ep-delete />
								</el-button>
							</el-tooltip>
					  </template>
					</el-table-column>
				</el-table>
			</div>
		</div>	
	</div>
		
		<el-dialog
			v-model="dialogVisible"
			:title="title"
			width="800"
			:close-on-click-modal="false"
		>
		
		<el-form
		  ref="formRef"
		  :model="formData"
		  :rules="formRules"
		  label-width="100px"
		>
		
			<el-form-item label="名称" prop="name">
				<el-input placeholder="名称" v-model="formData.name"  />
			</el-form-item>

			<el-form-item label="内容" prop="content"  v-show="formData.type=='content'">
				<el-scrollbar height="400px" style="border: 1px solid #424a5e">
					<codemirror
					  v-model="formData.content"
					  placeholder=""
					  scrollbarStyle="null"
					  autoCloseBrackets=true
					  matchBrackets=true
					  showCursorWhenSelecting=true
					  autoCloseTags=true
					  :autofocus="true"
					  :indent-with-tab="true"
					  :tabSize="2"
					  :extensions="extensions"
					  :lineWrapping="true"
					/>
				</el-scrollbar>
			</el-form-item>

			<el-form-item label="排序码" prop="sort">
				<el-input-number placeholder="排序码" v-model="formData.sort" type="number" :min="0"  controls-position="right" style="width: 100%;" />
			</el-form-item>
			</el-form>
		
			<template #footer>
			  <span class="dialog-footer">
				<el-button @click="closeDialog">取消</el-button>
				<el-button type="primary" @click="submitForm">
				  确定
				</el-button>
			  </span>
			</template>
		</el-dialog>
		
	</div>
</template>
<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { listForAPI,saveForAPI,deleteForAPI} from "@/api/itester";
	import type {FormRules } from 'element-plus'
	import {
		Collection
	} from '@element-plus/icons-vue'
	import Version from "./components/Version.vue";
	
	import { Codemirror } from "vue-codemirror";
	import { javascript } from "@codemirror/lang-javascript";
	import { oneDark } from "@codemirror/theme-one-dark";
	const extensions = [javascript(), oneDark];
	const mirrorHeight = ref(400);
	
	const curVersion=ref(null);
	
	const loading = ref(false);
	const tableData=ref([]);
	const load=()=>{
		loading.value=true;
		listForAPI({
			id:(curVersion && curVersion.value && curVersion.value.id)?curVersion.value.id:null,
		})
		.then(({result}) => {
			tableData.value= result
		})
		.catch((e:any) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleVersionRow=(data:any)=>{
		curVersion.value=data
		load()
	}
	
	const deleteVersionRow=()=>{
		curVersion.value=null
		load()
	}
	
	const copyVersionRow=(data:any)=>{
		curVersion.value=data
		load()
	}
	
	const dialogVisible = ref(false)
	const title=ref("");
	const formRef=ref();
	const formData=ref({
		id:'',
		pid:'',
		name:'',
		type:'',
		content:'',
		sort:0,
	});
	
	const formRules=reactive<FormRules>({
	  version: [{ required: true, message: "参数必填", trigger: "blur" }],
	});
	
	const openDialog=(type:string,pdata:any,data:any)=>{
		
		
		if(!pdata && !curVersion.value){
			ElMessage.warning("请选择api版本.")
			return
		}
		
		if(data){
			title.value="编辑"
			formData.value.id=data.id;
			formData.value.pid=data.pid;
			formData.value.name=data.name;
			formData.value.content=data.content;
			formData.value.type=data.type;
			formData.value.sort=data.sort;
		}else{
			title.value="新增"
			formData.value.type=type;
			if(pdata){
				formData.value.pid=pdata.id;
			}else{
				formData.value.pid=curVersion.value.id;
			}
		}
		dialogVisible.value=true;
	}
	
	const submitForm=()=>{
		formRef.value.validate((isValid: boolean) => {
		  if (isValid) {
				loading.value=true;
				saveForAPI(formData.value)
				.then((res) => {
					ElMessage.success(res.message);
					closeDialog();
					load();
				})
				.catch((e) => {
				})
				.finally(() => {
					loading.value=false;
				});
		  }
		});
	}
	
	const closeDialog=()=>{
		dialogVisible.value=false;
		resetForm();
	}
	
	function resetForm() {
	  formRef.value.resetFields();
	  formRef.value.clearValidate();
	  formData.value.id="";
	  formData.value.pid="";
	  formData.value.content="";
	  formData.value.name="";
	  formData.value.type="";
	  formData.value.sort=0;
	}
	
	const handleDelete=(row :object)=>{
		ElMessageBox.confirm("确认此版本吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  deleteForAPI({
			  	id:row.id
			  })
			  .then(() => {
				load();
				ElMessage.success("成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("取消"));
	}
	
	onMounted(() => {
	});
	
</script>
<style scoped>
	
	
	:deep(.CodeMirror-wrap pre) { word-break: break-word; }
	:deep(.CodeMirror) { height: 400px; width: 700px; border: 1px solid #ddd; }
	:deep(.CodeMirror-scroll) { max-height: 400px; width:700px; }
	:deep(.CodeMirror pre) { display:inline-block; padding-left: 7px; line-height: 1.25; }
	:deep(.ͼo .cm-content){
		width: 650px;
	}
	:deep(.ͼo) {
	    color: #abb2bf;
		background: var(--edit-color)
	}
	
	:deep(.ͼo .cm-gutters) {
		background-color:  var(--editor-color);
		color: #7d8799;
		border: none;
	}
	:deep(.ͼ4 .cm-line) {
	    caret-color: var(--edit-blue) !important;
	}
	
	:deep(.ͼo .cm-content) {
	    caret-color: var(--edit-blue);
	}
	
	:deep(.CodeMirror-wrap pre.CodeMirror-line){
	    word-wrap: break-word; 
	    white-space: pre-wrap;
	    word-break: normal;
	}
	
	:deep(.CodeMirror-wrap pre.CodeMirror-line-like) {
	    word-wrap: break-word; 
	    white-space: pre-wrap;
	    word-break: normal;
	}
	
	:deep(.cm-line){
		width: calc(var(--size) - 35px);
	}
	
	:deep(.cm-line span){
	    word-wrap: break-word;
	    white-space: pre-wrap;
	    word-break: normal;
	}
	:deep(.ͼ1 .cm-scroller){
		overflow: hidden;
	}
	
</style>